<route lang="yaml">
meta:
  title: 内容处理
</route>

<script setup lang="ts">
import {useXueBengStore} from "@/store/modules/xuebeng.ts";
import router from "@/router";

const xueBengStore = useXueBengStore()

const queryParams = ref({
  page: 1,
  platform: 40,
  channel: null,
  type: null,
  not: 0,
  mark: '',
  marks: [],
  sort: null,
  keyword: null
})

const detailInfo = ref({
  loading: false,
  drawer: false,
  name: '',
  mark: '',
  create: '',
  content: '',
})

const dataLoading = ref(false);

const pageData = ref({
  total: 0,
})

const novelList = ref([])
const channelList = ref([{
  id: 0,
  name: ''
}])
const labelList = ref([{
  id: 0,
  name: '',
  remark: ''
}])
const typeList = ref([{
  id: 0,
  name: '',
}])
const sortList = ref([
  {
    id: 0,
    name: '更新时间',
  },
  {
    id: 1,
    name: '推广人气',
  },
])

function queryNovelList() {
  dataLoading.value = true
  console.log(queryParams.value)
  if (queryParams.value.marks.length < 1) {
    queryParams.value.mark = ''
  } else {
    queryParams.value.mark = queryParams.value.marks.join(',')
  }
  xueBengStore.queryNovelList(queryParams.value).then((response) => {
    console.log(response)
    if (response) {
      novelList.value = response.data.data.list
      pageData.value.total = response.data.data.page.total
    }
    dataLoading.value = false
  })
}

function queryNovelListFilterData() {
  xueBengStore.queryNovelListFilterData().then((response) => {
    if (response) {
      const rsp = JSON.parse(JSON.stringify(response))
      console.log(rsp)
      channelList.value = rsp.data.data.channels
      labelList.value = rsp.data.data.marks
      typeList.value = rsp.data.data.types
    }
  })
}

function getDetailInfo(row: any) {
  detailInfo.value.name = row.name
  detailInfo.value.mark = row.mark
  detailInfo.value.create = row.create_at
  getArticleById(row.id)
  detailInfo.value.drawer = true
}

function getArticleById(id: number) {
  xueBengStore.getArticleById(id).then((response) => {
    if (response) {
      console.log(response)
      const html = response.data.data.content
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = html;
      let result = '';
      const paragraphs = tempDiv.querySelectorAll('p');
      // 提取文本内容并用换行符连接
      paragraphs.forEach(p => {
        result += p.textContent + '\n';
      });
      detailInfo.value.content = result
      console.log(detailInfo.value.content )
    }
  })
}

function routeContentProcess(id: number) {
  router.push({
    path: '/novel_menu/content',
    query: {
      novelId: id
    }
  })
}

onMounted(() => {
  // 如果没登录则先登录获取token
  if (!xueBengStore.isLogin) {
    const xueBengConfig = localStorage.xueBengConfig
    if (xueBengConfig) {
      const xbConfig = JSON.parse(xueBengConfig)
      xueBengStore.login({
        type: 1,
        phone: xbConfig.phone,
        password: xbConfig.password,
      })
    }
  }
  // 初始化调用
  queryNovelListFilterData()
  queryNovelList()
})

function handleCurrentChange(num: number) {
  queryParams.value.page = num
  queryNovelList()
}

</script>

<template>
  <div>
<!--    <FaPageHeader>-->
<!--      <template #title>-->
<!--        <div class="flex items-center gap-4">-->
<!--          新文列表-雪崩巨量-->
<!--        </div>-->
<!--      </template>-->
<!--      <template #description>-->
<!--        <div class="text-sm/6">-->
<!--          <div>-->
<!--            功能：数据来源于【雪崩巨量APP】的知乎故事，同步更新最新小说内容，每次打开都是最新数据-->
<!--          </div>-->
<!--        </div>-->
<!--      </template>-->
<!--    </FaPageHeader>-->
    <FaPageMain>
      <template #title>
        <el-form :inline="true" v-model="queryParams">
          <el-form-item label="频道">
            <el-select v-model="queryParams.channel" placeholder="请选择频道" style="width: 180px" clearable >
              <el-option
                v-for="item in channelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="queryParams.marks" placeholder="请选择标签（多选）" style="width: 180px" multiple collapse-tags filterable clearable >
              <el-option
                v-for="item in labelList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="queryParams.type" placeholder="请选择类型" style="width: 180px" clearable >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-select v-model="queryParams.sort" placeholder="请选择排序" style="width: 180px" clearable >
              <el-option
                v-for="item in sortList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryNovelList">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #default>
        <el-table
          :data="novelList"
          style="width: 100%; height: 500px;"
          v-loading="dataLoading"
        >
          <el-table-column prop="name" label="小说名称" min-width="120" />
          <el-table-column prop="mark" label="标签"  min-width="150" />
          <el-table-column prop="create_at" label="上架时间" />
          <el-table-column prop="typeInfo.name" label="小说类型" />
          <el-table-column fixed="right" label="操作" min-width="80">
            <template #default="scope">
              <el-button type="primary" size="small" @click="getDetailInfo(scope.row)">
                详情
              </el-button>
              <el-button type="success" size="small" @click="routeContentProcess(scope.row.id)">
                处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <div>
          <el-pagination background layout="prev, pager, next"
                         :total="pageData.total"
                         :page-size="20"
                         @current-change="handleCurrentChange" />
        </div>
      </template>
    </FaPageMain>

    <el-drawer
      v-model="detailInfo.drawer"
      :title="detailInfo.name"
    >
      {{ detailInfo.content }}
    </el-drawer>
  </div>
</template>
